/* eslint-disable no-param-reassign */
/* eslint-disable array-callback-return */
import { AddMission, AddSteps, AddTags, AddUsers } from '@/components/DragModal/formdoms';
import IconFont from '@/components/IconFont';
import { doFetch, getFetch } from '@/utils/doFetch';
import {
  ArrowLeftOutlined,
  DeleteOutlined,
  EditFilled,
  PlayCircleFilled,
  PlusOutlined,
  RedoOutlined,
  TagOutlined,
} from '@ant-design/icons';
import { history, useModel, useParams } from '@umijs/max';
import { useRequest } from 'ahooks';
import {
  Avatar,
  Card,
  DatePicker,
  Modal,
  Popconfirm,
  Popover,
  Segmented,
  Select,
  Skeleton,
  Switch,
  Tooltip,
  Typography,
} from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useMemo, useState } from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import { Scrollbars } from 'react-custom-scrollbars';
import './index.less';
import QuoteList from './QuoteList';

const { Paragraph } = Typography;

const items = {
  0: {
    value: '0',
    statusName: '未开始',
    icon: (
      <Tooltip title="点击开始">
        <PlayCircleFilled style={{ color: '#1890ff' }} />
      </Tooltip>
    ),
  },
  1: {
    value: '1',
    statusName: '进行中',
    color: 'green',
    icon: (
      <Tooltip title="点击完成">
        <IconFont type="icon-jinhangzhong-shijian-daojishi-03" style={{ color: 'green' }} />
      </Tooltip>
    ),
  },
  2: {
    value: '2',
    statusName: '已完成',
    color: 'grey',
    icon: (
      <Tooltip title="已完成">
        <IconFont type="icon-yiwancheng" style={{ color: 'grey' }} />
      </Tooltip>
    ),
  },
};

const columns = [];

function swapArray(arr, index1, index2) {
  arr[index1] = arr.splice(index2, 1, arr[index1])[0];
  return arr;
}

const MissionPools = ({ datalist = [], userList, setmodal, refresh }) => {
  const {
    initialState: { vs },
    setInitialState,
  } = useModel('@@initialState');

  const setvs = (val) => {
    setInitialState((s) => ({
      ...s,
      vs: val,
    }));
  };

  return (
    <div
      className="rightcontent"
      style={{ width: vs ? 250 : 50, right: vs ? 12 : 0, overflow: 'visible' }}
      onClick={() => {
        setvs(true);
      }}
    >
      {!vs && (
        <div className="hovers">
          <ArrowLeftOutlined />
        </div>
      )}
      {vs && (
        <Card
          style={{ width: '100%', margin: 0 }}
          title={
            <b style={{ fontSize: 14 }}>
              任务池{' '}
              <a
                onClick={(e) => {
                  e.stopPropagation();
                  setvs(false);
                }}
              >
                收起
              </a>
            </b>
          }
          bordered={vs}
          className="card"
          hoverable
          extra={[
            <div
              key="adder"
              className="sorts"
              onClick={() => {
                setmodal((s) => ({
                  ...s,
                  open: true,
                  title: '任务池-新建任务',
                  width: '1000px',
                  step_id: null,
                  sort: datalist?.length ? Math.max(...datalist?.map((it) => it.sort + 1)) : 0,
                  defaultValue: {},
                }));
              }}
            >
              <PlusOutlined style={{ color: 'rgb(24, 144, 255)' }} />
            </div>,
          ]}
        >
          <div className="scrollcontian">
            <Scrollbars
              thumbMinSize={10}
              autoHide
              style={{
                width: '100%',
                height: '100%',
              }}
              hideTracksWhenNotNeeded
            >
              <QuoteList
                type="pool"
                userList={userList ?? []}
                refresh={() => {
                  refresh?.();
                }}
                edit={(defaultValue) => {
                  setmodal((s) => ({
                    ...s,
                    open: true,
                    title: '任务池-编辑任务',
                    width: '1000px',
                    step_id: null,
                    defaultValue: defaultValue,
                    sort: null,
                  }));
                }}
                datas={datalist ?? []}
                listId={'mission_pool'}
              ></QuoteList>
            </Scrollbars>
          </div>
        </Card>
      )}
    </div>
  );
};

const Project = () => {
  // const location = useLocation();
  // const id = location.state.id;

  const { id } = useParams();
  const [state, setState] = useState({ columns, search: { status: '-1', mine: false } });
  const [modal, setmodal] = useState({
    open: false,
  });
  const [pooldata, setpooldata] = useState([]);
  const {
    initialState: { currentUser, activeUserIdList, curitem },
    setInitialState,
  } = useModel('@@initialState');

  const { data, loading, refresh } = useRequest(
    async () => {
      const res = await getFetch({
        url: '/webtool/v1/project/' + id,
        params: { ...state?.search, tags: state?.search?.tags?.join(',') },
      });
      return res?.data;
    },
    {
      debounceWait: 300,
      refreshDeps: [state.search, id, curitem],
      onSuccess: (data) => {
        setState((s) => ({
          ...s,
          columns: data?.steps,
        }));
      },
    },
  );

  const tags = useRequest(
    async () => {
      const res = await getFetch({ url: '/webtool/v1/tag', params: { project_id: parseInt(id) } });
      return res?.data;
    },
    {
      debounceWait: 300,
      refreshDeps: [id],
    },
  );

  const mission_pool = useRequest(
    async () => {
      const res = await getFetch({
        url: '/webtool/v1/item',
        params: { step_id: currentUser?.org_id + 9999999 },
      });
      return res?.data;
    },
    {
      debounceWait: 300,
      refreshDeps: [currentUser?.org_id],
      onSuccess: (res, params) => {
        setpooldata(res);
      },
    },
  );

  const onDragEnd = async (result) => {
    // the only one that is required
    const { destination, source, draggableId, combine } = result;

    if (result.type === 'COLUMN') {
      const submitarr = Object?.values?.(state?.columns);
      let resarr = swapArray(submitarr, source.index, destination.index);
      resarr = resarr.map((it, i) => ({
        ...it,
        sort: i,
      }));
      setState((s) => ({
        ...s,
        columns: resarr,
      }));
      resarr?.map((it, i) => {
        doFetch({
          url: '/webtool/v1/step/' + it?.id,
          params: {
            sort: i,
          },
          method: 'PUT',
        });
      });
      return;
    }

    if (!destination) {
      return;
    }
    if (destination.droppableId === 'mission_pool' && source.droppableId === 'mission_pool') {
      let newColumns = pooldata ? JSON.parse(JSON.stringify(pooldata)) : [];
      const moveItem = newColumns[source.index];
      newColumns = newColumns?.filter((it, i) => i !== source.index);
      newColumns.splice(destination.index, 0, { ...moveItem });
      setpooldata(
        newColumns?.map((it, i) => ({
          ...it,
          sort: i,
        })),
      );
      const sortlist = newColumns?.map((it, i) =>
        _.pick(
          {
            ...it,
          },
          ['id', 'step_id', 'status', 'project_id'],
        ),
      );
      doFetch({
        url: '/webtool/v1/mutisort',
        params: {
          sortlist,
        },
      });
      return;
    }

    if (destination.droppableId === 'mission_pool' && source.droppableId !== 'mission_pool') {
      const firstarrindex = state.columns
        ?.map((it) => it?.id?.toString())
        .indexOf(source.droppableId);
      let moveItem, donate;
      setState((s) => {
        let newColumns = JSON.parse(JSON.stringify(s.columns));
        newColumns = newColumns?.map((item, index) => {
          if (index === firstarrindex) {
            return {
              ...item,
              items: item.items.filter((it, i) => {
                if (i === source.index) {
                  moveItem = { ...it, status: '3' }; //状态重置
                }
                return i !== source.index;
              }),
            };
          }
          return item;
        });
        return {
          ...s,
          columns: newColumns,
        };
      });

      setpooldata((s) => {
        const donates = JSON.parse(JSON.stringify(s));
        const step_id = currentUser?.org_id + 9999999;
        donates.splice(destination.index, 0, { ...moveItem });
        donate = donates?.map((it, i) =>
          _.pick(
            {
              ...it,
              sort: i,
              step_id,
              project_id: parseInt(id),
            },
            ['id', 'step_id', 'status', 'project_id'],
          ),
        );
        doFetch({
          url: '/webtool/v1/mutisort',
          params: {
            sortlist: donate,
          },
        });
        return donates?.map((it, i) => ({
          ...it,
          sort: i,
        }));
      });

      return;
    }

    if (destination.droppableId !== 'mission_pool' && source.droppableId === 'mission_pool') {
      const secondarrindex = state.columns
        ?.map((it) => it?.id?.toString())
        .indexOf(destination.droppableId);

      let moveItem, donate;

      await setpooldata((s) => {
        const donates = JSON.parse(JSON.stringify(s));
        const res = donates?.filter((it, i) => {
          if (i === source.index) {
            moveItem = { ...it, status: '0' }; //状态重置
          }
          return i !== source?.index;
        });
        return res;
      });

      await setState((s) => {
        let newColumns = JSON.parse(JSON.stringify(s.columns));
        newColumns = newColumns?.map((item, index) => {
          if (index === secondarrindex) {
            donate = JSON.parse(JSON.stringify(item.items));
            donate.splice(destination.index, 0, { ...moveItem });
            const sortlist = donate?.map((it, i) =>
              _.pick(
                {
                  ...it,
                  sort: i,
                  step_id: item.id,
                  project_id: parseInt(id),
                },
                ['id', 'step_id', 'status', 'project_id'],
              ),
            );
            doFetch({
              url: '/webtool/v1/mutisort',
              params: {
                sortlist,
              },
            });
            if (moveItem?.tags?.length > 0) {
              const params = {
                tags: moveItem?.tags?.map((it) => ({
                  ...it,
                  project_id: parseInt(id),
                })),
                onlyupdate: true,
                project_id: parseInt(id),
              };
              doFetch({ url: '/webtool/v1/mutitag', params: { ...params } });
            }

            return {
              ...item,
              items: donate?.map((it, i) => ({
                ...it,
                sort: i,
              })),
            };
          }
          return item;
        });
        return {
          ...s,
          columns: newColumns,
        };
      });

      return;
    }

    if (destination.droppableId === source.droppableId && destination.index === source.index) {
      return;
    }

    const firstarrindex = state.columns
      ?.map((it) => it?.id?.toString())
      .indexOf(source.droppableId);
    const secondarrindex = state.columns
      ?.map((it) => it?.id?.toString())
      .indexOf(destination.droppableId);

    if (firstarrindex === secondarrindex) {
      await setState((s) => {
        let newColumns = JSON.parse(JSON.stringify(s.columns));
        newColumns = newColumns?.map((item, index) => {
          if (index === firstarrindex) {
            let newColumnes = item.items ? JSON.parse(JSON.stringify(item.items)) : [];
            const moveItem = newColumnes[source.index];
            newColumnes = newColumnes?.filter((it, i) => i !== source.index);
            newColumnes.splice(destination.index, 0, { ...moveItem });
            const sortlist = newColumnes?.map((it, i) =>
              _.pick(
                {
                  ...it,
                },
                ['id', 'step_id', 'status', 'project_id'],
              ),
            );

            doFetch({
              url: '/webtool/v1/mutisort',
              params: {
                sortlist,
              },
            });

            return {
              ...item,
              items: newColumnes?.map((it, i) => ({
                ...it,
                sort: i,
              })),
            };
          }
          return item;
        });
        return {
          ...s,
          columns: newColumns,
        };
      });
    } else {
      let moveItem, donate;
      setState((s) => {
        let newColumns = JSON.parse(JSON.stringify(s.columns));
        newColumns = newColumns
          ?.map((item, index) => {
            if (index === firstarrindex) {
              return {
                ...item,
                items: item.items.filter((it, i) => {
                  if (i === source.index) {
                    moveItem = { ...it, status: '0' }; //状态重置
                  }
                  return i !== source.index;
                }),
              };
            }
            return item;
          })
          .map((item, index) => {
            if (index === secondarrindex) {
              donate = JSON.parse(JSON.stringify(item.items));
              donate.splice(destination.index, 0, { ...moveItem, step_id: item.id });
              return {
                ...item,
                items: donate?.map((it, i) => ({
                  ...it,
                  sort: i,
                })),
              };
            }
            return item;
          });
        return {
          ...s,
          columns: newColumns,
        };
      });

      const sortlist = donate?.map((it, i) =>
        _.pick(
          {
            ...it,
          },
          ['id', 'step_id', 'status', 'project_id'],
        ),
      );

      doFetch({
        url: '/webtool/v1/mutisort',
        params: {
          sortlist,
        },
      }).then((res) => {
        if (res.code === 0) {
          Modal.confirm({
            title: '修改执行人',
            maskClosable: true,
            content: (
              <div>
                <Select
                  style={{ width: '100%' }}
                  placeholder={'修改执行人'}
                  options={data?.user_info_list?.map((it) => {
                    return {
                      label: it?.user_name,
                      value: it?.id,
                    };
                  })}
                  onChange={(value) => {
                    doFetch({
                      url: '/webtool/v1/item/' + moveItem.id,
                      params: { userid: value },
                      method: 'PUT',
                    }).then((res) => {
                      if (res.code === 0) {
                        Modal.destroyAll();
                        refresh();
                      }
                    });
                  }}
                ></Select>
              </div>
            ),
            footer: false,
          });
        }
      });
    }
  };

  const notfinish = useMemo(() => {
    if (state?.columns?.length === 0) {
      return true;
    }

    let alltask = state?.columns?.map((it) => it.items.map((it) => it.status));
    alltask = [...new Set(alltask.flat())];
    if (alltask.length === 0 || alltask.some((it) => ['0', '1'].includes(it))) {
      return true;
    }
  }, [state?.columns]);

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Modal
        {...modal}
        onCancel={() => {
          setmodal((s) => ({
            ...s,
            open: false,
          }));
        }}
        footer={false}
        destroyOnClose={true}
        style={{ top: 20 }}
      >
        {['新建任务', '编辑任务', '任务池-新建任务', '任务池-编辑任务'].includes(modal?.title) && (
          <AddMission
            title={modal?.title}
            org_id={currentUser?.org_id}
            project_id={parseInt(id)}
            sort={modal?.sort}
            step_id={modal?.step_id}
            defaultValue={modal?.defaultValue}
            userList={data?.user_info_list}
            enddate={data?.deadline}
            refresh={() => {
              refresh();
              mission_pool?.refresh();
              setmodal((s) => ({
                ...s,
                open: false,
              }));
            }}
          />
        )}
        {modal?.title === '新建流程' && (
          <AddSteps
            id={id}
            columns={state?.columns}
            refresh={() => {
              refresh();
              setmodal((s) => ({
                ...s,
                open: false,
              }));
            }}
          />
        )}
        {modal?.title === '管理标签' && (
          <AddTags
            project_id={parseInt(id)}
            refresh={() => {
              refresh();
              setmodal((s) => ({
                ...s,
                open: false,
              }));
            }}
          />
        )}
        {modal?.title === '编辑项目成员' && (
          <AddUsers
            project_id={parseInt(id)}
            initialValues={{
              user_list: data?.user_info_list?.map((it) => it.id),
            }}
            refresh={() => {
              refresh();
              setmodal((s) => ({
                ...s,
                open: false,
              }));
            }}
          />
        )}
      </Modal>

      <div
        className="center bglight"
        style={{
          justifyContent: 'space-between',
          margin: '0px 0 12px 0',
          padding: 12,
          borderRadius: 12,
          minWidth: 1300,
          overflow: 'auto',
          position: 'sticky',
          top: 0,
          zIndex: 999,
        }}
      >
        {loading && !data ? (
          <Skeleton.Input active />
        ) : (
          <>
            <div className="center">
              <div
                className="hoverable"
                onClick={() => {
                  history.go(-1);
                }}
                style={{ marginRight: 18 }}
              >
                <ArrowLeftOutlined />
              </div>
              {currentUser?.id === data?.project_user_id ? (
                <Paragraph
                  className="no-outline"
                  style={{ color: '#000000', fontSize: 16, fontWeight: 'bolder' }}
                  editable={{
                    onChange: async (value) => {
                      let res = await doFetch({
                        url: '/webtool/v1/project/' + id,
                        params: {
                          project_name: value,
                        },
                        method: 'PUT',
                      });
                      if (res.code === 0) {
                        refresh();
                      }
                    },
                  }}
                >
                  {data?.project_name}
                </Paragraph>
              ) : (
                <b>{data?.project_name}</b>
              )}

              <Tooltip title={dayjs(data?.deadline).format('YYYY-MM-DD HH:mm')}>
                <b
                  className="center"
                  style={{ color: '#333', textIndent: 12, marginRight: 2, fontSize: 14 }}
                >
                  {dayjs(data?.deadline).endOf('day').diff(dayjs(), 'hour') > 0 ? (
                    dayjs(data?.deadline).endOf('day').diff(dayjs(), 'hour') > 24 ? (
                      <b style={{ paddingLeft: 8, color: 'rgba(115,155,6,1)' }}>
                        距截止{dayjs(data?.deadline).endOf('day').diff(dayjs(), 'day')}天
                      </b>
                    ) : (
                      <b style={{ paddingLeft: 8, color: 'rgb(178, 116, 0)' }}>
                        距截止{dayjs(data?.deadline).endOf('day').diff(dayjs(), 'hour')}小时
                      </b>
                    )
                  ) : dayjs().diff(dayjs(data?.deadline).endOf('day'), 'hour') > 24 ? (
                    <b
                      style={{
                        paddingLeft: 8,
                        color: notfinish ? '#d84c00' : 'green',
                      }}
                    >
                      {notfinish ? '超过截止' : '已完成'}
                      {dayjs().diff(dayjs(data?.deadline).endOf('day'), 'day')}天
                    </b>
                  ) : (
                    <b
                      style={{
                        paddingLeft: 8,
                        color: notfinish ? '#d84c00' : 'green',
                      }}
                    >
                      {notfinish ? '超过截止' : '已完成'}
                      {dayjs().diff(dayjs(data?.deadline).endOf('day'), 'hour')}小时
                    </b>
                  )}
                </b>
              </Tooltip>

              {currentUser?.id === data?.project_user_id && (
                <Popover
                  content={
                    <DatePicker
                      defaultValue={dayjs(data?.deadline) ?? dayjs()}
                      style={{ width: 180 }}
                      onChange={async (value) => {
                        let res = await doFetch({
                          url: '/webtool/v1/project/' + id,
                          params: {
                            deadline: value,
                          },
                          method: 'PUT',
                        });
                        if (res.code === 0) {
                          refresh();
                        }
                      }}
                    />
                  }
                  placement="bottom"
                >
                  <a style={{ color: '#1677ff', cursor: 'pointer', fontSize: 14 }}>- 修改</a>
                </Popover>
              )}

              <Tooltip title={'刷新'}>
                <div
                  className="sort"
                  style={{ marginRight: 12, marginLeft: 16 }}
                  onClick={() => {
                    refresh();
                    mission_pool?.refresh();
                  }}
                >
                  <RedoOutlined />
                </div>
              </Tooltip>
              <Segmented
                value={state.search.status}
                onChange={async (val) => {
                  await setState((s) => ({
                    ...s,
                    search: {
                      ...s.search,
                      status: val,
                    },
                  }));
                }}
                options={[
                  {
                    label: '全部',
                    value: '-1',
                  },
                ].concat(
                  Object.values(items).map((it) => ({
                    label: it.statusName,
                    value: it.value,
                  })),
                )}
              />
              <div className="center">
                <span style={{ fontSize: 14, textIndent: 12 }}>只看我的</span>
                <Switch
                  size="large"
                  style={{ margin: '0 12px 0 6px' }}
                  checked={state?.search?.mine}
                  onChange={(val) => {
                    setState((s) => ({
                      ...s,
                      search: {
                        ...s.search,
                        mine: val,
                      },
                    }));
                  }}
                ></Switch>
              </div>
              <Select
                maxTagCount={1}
                onDropdownVisibleChange={() => {
                  tags.refresh();
                }}
                placeholder={'请选择标签'}
                style={{ width: '286px', margin: '0 12px' }}
                mode="multiple"
                allowClear
                value={state.search.tags}
                onChange={async (val) => {
                  await setState((s) => ({
                    ...s,
                    search: {
                      ...s.search,
                      tags: val,
                    },
                  }));
                }}
                options={tags?.data?.map((it) => {
                  return {
                    label: it?.tag_name,
                    value: it?.id,
                  };
                })}
              ></Select>
              <Tooltip title={'标签管理'}>
                <div
                  className="sort"
                  onClick={() => {
                    setmodal((s) => ({
                      ...s,
                      title: '管理标签',
                      open: true,
                    }));
                  }}
                >
                  <TagOutlined />
                </div>
              </Tooltip>
            </div>

            <div className="center" style={{ gap: 12 }}>
              <Avatar.Group maxCount={6}>
                {[
                  ...data?.user_info_list.filter((it) => it?.id === data?.project_user_id),
                  ...[
                    ...data?.user_info_list.filter(
                      (it) =>
                        it?.id !== data?.project_user_id &&
                        activeUserIdList.includes(it.id.toString()),
                    ),
                    ...data?.user_info_list.filter(
                      (it) =>
                        it?.id !== data?.project_user_id &&
                        !activeUserIdList.includes(it.id.toString()),
                    ),
                  ],
                ].map((it, i) => {
                  if (it?.head_url && it?.head_url !== '') {
                    return (
                      <Tooltip title={(i === 0 ? '组长:' : '成员:') + it?.user_name} key={i}>
                        <Avatar
                          src={it?.head_url}
                          className={i === 0 ? 'borderanis' : ''}
                          style={{
                            filter:
                              activeUserIdList.indexOf(it.id.toString()) !== -1 ||
                              currentUser?.id === it.id
                                ? 'grayscale(0%)'
                                : 'grayscale(100%)',
                          }}
                        />
                      </Tooltip>
                    );
                  } else {
                    return (
                      <Tooltip title={(i === 0 ? '组长:' : '成员:') + it?.user_name} key={i}>
                        <Avatar
                          className={i === 0 ? 'borderanis' : ''}
                          style={{
                            filter:
                              activeUserIdList.indexOf(it.id.toString()) !== -1 ||
                              currentUser?.id === it.id
                                ? 'grayscale(0%)'
                                : 'grayscale(100%)',
                          }}
                        >
                          {it?.user_name?.charAt(0)}
                        </Avatar>
                      </Tooltip>
                    );
                  }
                })}
              </Avatar.Group>
              <Avatar
                icon={<EditFilled style={{ fontSize: 14, marginTop: 7, display: 'block' }} />}
                style={{ backgroundColor: '#73c0de', cursor: 'pointer', marginLeft: -20 }}
                onClick={() => {
                  setmodal((s) => ({
                    ...s,
                    title: '编辑项目成员',
                    open: true,
                  }));
                }}
              />
            </div>
          </>
        )}
      </div>

      <Skeleton active loading={loading && !data}>
        <Droppable droppableId={'board'} direction="horizontal" type="COLUMN">
          {(provided, snapshot) => (
            <div
              {...provided.droppableProps}
              ref={provided.innerRef}
              style={{
                width: '100%',
                display: 'flex',
                justifyContent: 'flex-start',
                alignItems: 'flex-start',
                height: 'calc(100vh - 0)',
                minWidth: 1300,
                marginBottom: 12,
                paddingBottom: 12,
              }}
            >
              {state.columns
                .sort((a, b) => a.sort - b.sort)
                .map((column, index) => (
                  <Draggable
                    key={column?.id?.toString()}
                    draggableId={column?.id?.toString()}
                    index={index}
                  >
                    {(provided, snapshot) => (
                      <Card
                        title={
                          currentUser?.id === data?.project_user_id ? (
                            <Paragraph
                              {...provided.dragHandleProps}
                              className="no-outline"
                              style={{ color: '#000000' }}
                              editable={{
                                onChange: async (value) => {
                                  let res = await doFetch({
                                    url: '/webtool/v1/step/' + column?.id,
                                    params: {
                                      name: value,
                                    },
                                    method: 'PUT',
                                  });
                                  if (res.code === 0) {
                                    refresh();
                                  }
                                },
                              }}
                            >
                              {column?.name}
                            </Paragraph>
                          ) : (
                            <b style={{ fontSize: 14 }}>{column?.name}</b>
                          )
                        }
                        className="card"
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        hoverable
                        extra={[
                          <div
                            key="adder"
                            className="sorts"
                            onClick={() => {
                              setmodal((s) => ({
                                ...s,
                                open: true,
                                title: '新建任务',
                                width: '1000px',
                                step_id: column.id,
                                sort: column?.items?.length
                                  ? Math.max(...column?.items?.map((it) => it.sort + 1))
                                  : 0,
                                defaultValue: {},
                              }));
                            }}
                          >
                            <PlusOutlined style={{ color: 'rgb(24, 144, 255)' }} />
                          </div>,
                          column?.items?.length === 0 &&
                            currentUser?.id === data?.project_user_id && (
                              <Popconfirm
                                title="是否删除该流程？"
                                placement="bottomRight"
                                onConfirm={async () => {
                                  let res = await doFetch({
                                    url: '/webtool/v1/step/' + column.id,
                                    method: 'DELETE',
                                  });
                                  if (res.code === 0) {
                                    refresh();
                                  }
                                }}
                              >
                                <div key="adder" className="sorts">
                                  <DeleteOutlined style={{ color: '#ff4800' }} />
                                </div>
                              </Popconfirm>
                            ),
                        ]}
                      >
                        <QuoteList
                          userList={data?.user_info_list}
                          refresh={() => {
                            refresh();
                            mission_pool?.refresh();
                          }}
                          edit={(defaultValue) => {
                            setmodal((s) => ({
                              ...s,
                              open: true,
                              title: '编辑任务',
                              width: '1000px',
                              step_id: column.id,
                              defaultValue: defaultValue,
                              sort: null,
                            }));
                          }}
                          datas={column?.items ?? []}
                          listId={column?.id?.toString()}
                        ></QuoteList>
                      </Card>
                    )}
                  </Draggable>
                ))}
              <MissionPools
                userList={data?.user_info_list}
                setmodal={setmodal}
                datalist={pooldata ?? []}
                refresh={() => {
                  refresh();
                  mission_pool?.refresh();
                }}
              />

              {!snapshot.draggingFromThisWith && currentUser?.id === data?.project_user_id && (
                <Card
                  style={{ height: 50 }}
                  hoverable
                  className="center"
                  onClick={() => {
                    setmodal((s) => ({
                      ...s,
                      open: true,
                      title: '新建流程',
                      width: '400px',
                    }));
                  }}
                >
                  <PlusOutlined style={{ color: '#1890ff' }} />
                </Card>
              )}
            </div>
          )}
        </Droppable>
      </Skeleton>
    </DragDropContext>
  );
};
export default Project;
